<template>
  <div class="work-order-list" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
    <div v-if="orders.length > 0" class="list-container" :style="{ transform: shouldScroll ? `translateY(${translateY}px)` : 'none' }">
      <div v-for="(order, index) in orders" :key="index" class="order-item">
        <div class="order-title">{{ order.Name }}</div>
        <div class="order-time">{{ order.CreatedTime }}</div>
        <div class="order-status" :class="getStatusClass(order.HandlerStatus)">{{ order.HandlerStatus }}</div>
      </div>
    </div>
    <div v-else class="no-data">
      暂无工单数据
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { getWorkOrderList } from '@/api/h3yun'

// 显式声明setInterval返回类型
declare function setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
declare function clearInterval(id?: number): void;

export default defineComponent({
  name: 'WorkOrderList',
  props: {
    areaCode: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const orders = ref([])
    const translateY = ref(0)
    const scrollInterval = ref<number>()
    const isPaused = ref(false)

    watch(() => props.areaCode, () => {
      fetchWorkOrders()
    })

    // 判断是否需要滚动
    const shouldScroll = computed(() => orders.value.length > 4)

    // 获取工单列表
    const fetchWorkOrders = async () => {
      try {
        const response = await getWorkOrderList(props.areaCode)
        if (response.code === '0' && response.data) {
          orders.value = response.data
        }
      } catch (error) {
        console.error('获取工单列表失败:', error)
      }
    }

    // 根据HandlerStatus获取对应的CSS类名
    const getStatusClass = (status: string) => {
      switch (status) {
        case '待处理':
          return 'pending'
        case '处理中':
          return 'processing'
        case '已完成':
          return 'completed'
        default:
          return ''
      }
    }

    const startScrolling = () => {
      if (!shouldScroll.value) return
      
      scrollInterval.value = setInterval(() => {
        if (!isPaused.value) {
          translateY.value -= 1
          if (translateY.value <= -25 * orders.value.length) {
            translateY.value = 0
          }
        }
      }, 50)
    }

    const pauseScroll = () => {
      isPaused.value = true
    }

    const resumeScroll = () => {
      isPaused.value = false
    }

    onMounted(async () => {
      await fetchWorkOrders()
      startScrolling()
    })

    onUnmounted(() => {
      if (scrollInterval.value) {
        clearInterval(scrollInterval.value)
        scrollInterval.value = undefined
      }
    })

    return {
      orders,
      translateY,
      pauseScroll,
      resumeScroll,
      getStatusClass,
      shouldScroll
    }
  }
})
</script>

<style scoped>
.work-order-list {
  height: 100%;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
}

.list-container {
  transition: transform 0.3s ease;
}

.order-item {
  height: 25px;
  padding: 5px;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.order-title {
  width: 40%;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}

.order-time {
  width: 40%;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding-right: 8px;
  box-sizing: border-box;
}

.order-status {
  width: 60px;
  text-align: center;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  font-weight: bold;
}

.order-status.pending {
  background-color: rgba(255, 152, 0, 0.2);
  color: #ff9800;
  border: 1px solid #ff9800;
}

.order-status.processing {
  background-color: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border: 1px solid #2196f3;
}

.order-status.completed {
  background-color: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 1px solid #4caf50;
}

.no-data {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
</style>
